<template>
  <div class="project-management-container">
    <div class="table-header">
      <h2 class="title">项目管理</h2>
      <div class="search-bar">
        <div class="search-input">
          <i class="el-icon-search"></i>
          <input type="text" v-model="searchKeyword" placeholder="请输入关键词搜索" />
        </div>
        <div class="search-input">
          <i class="el-icon-folder"></i>
          <input type="text" placeholder="请输入资源目录" />
        </div>
        <div class="select-wrapper">
          <select v-model="resourceType">
            <option value="">所有</option>
            <option value="1">图像识别</option>
            <option value="2">情感识别</option>
            <option value="3">文档识别</option>
          </select>
        </div>
        <button class="search-btn" @click="fetchProjects">
          <i class="el-icon-search"></i> 查询
        </button>
      </div>
    </div>

    <div class="filter-bar">
      <div class="filter-item">
        <span class="filter-label">标注方式:</span>
        <div class="select-wrapper">
          <select v-model="labelMethod">
            <option value="">全部</option>
            <option value="1">自动标注</option>
            <option value="2">人工</option>
          </select>
        </div>
      </div>
      <div class="filter-item">
        <span class="filter-label">创建时间:</span>
        <div class="date-picker">
          <input type="date" v-model="startDate" />
          <span>至</span>
          <input type="date" v-model="endDate" />
        </div>
      </div>
      <div class="filter-item">
        <span class="filter-label">状态:</span>
        <div class="select-wrapper">
          <select v-model="status">
            <option value="">全部</option>
            <option value="1">已上线</option>
            <option value="2">未上线</option>
          </select>
        </div>
      </div>
      <div class="action-buttons">
        <button class="reset-btn">
          <i class="el-icon-refresh"></i> 重置
        </button>
        <button class="export-btn">
          <i class="el-icon-download"></i> 下载
        </button>
      </div>
    </div>

    <div class="table-wrapper">
      <table class="data-table">
        <thead>
        <tr>
          <th>项目编号</th>
          <th>项目名称</th>
          <th>项目负责人</th>
          <th>创建时间</th>
          <th>项目状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.manager }}</td>
          <td>{{ item.createTime }}</td>
          <td>{{ item.status }}</td>
          <td>
            <el-button :icon="Search" circle />
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="danger" :icon="Delete" circle />
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="pagination">
      <span>共100条</span>
      <div class="page-numbers">
        <a href="#" class="page-number active">1</a>
        <a href="#" class="page-number">2</a>
        <a href="#" class="page-number">3</a>
        <a href="#" class="page-number">4</a>
        <a href="#" class="page-number">5</a>
        <span>...</span>
        <a href="#" class="page-number">10</a>
      </div>
      <div class="page-size">
        <span>10条/页</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import axios from "axios";
export default {
  data() {
    return {
      Search,
      Edit,
      Delete,
      searchKeyword: '',
      resourceType: '',
      labelMethod: '',
      startDate: '',
      endDate: '',
      status: '',
      tableData: [],
    };
  },
  methods: {
    async fetchProjects() { // 修改方法名为获取项目数据
      try {
        const response = await axios.get('http://localhost:8080/projects/gets'); // 修改为项目接口
        const transformedData = response.data.map(project => ({
          id: project.projectId,
          name: project.projectName,
          manager: '暂无负责人',
          createTime: project.createdAt,
          status: project.status
        }));
        this.tableData = transformedData;
        console.log('成功获取并转换所有项目数据:', this.tableData);
      } catch (error) {
        console.error('获取项目数据失败:', error);
      }
    },
    getContentTypeClass(type) {
      if (type.includes('图像')) return 'tag-blue';
      if (type.includes('情感')) return 'tag-purple';
      if (type.includes('文档')) return 'tag-yellow';
      if (type.includes('多模态')) return 'tag-green';
      return 'tag-default';
    },
    getStatusClass(status) {
      if (status === '已上线') return 'status-success';
      if (status === '未上线') return 'status-pending';
      return 'status-default';
    }
  },
  mounted() {
    this.fetchProjects(); // 调用获取项目数据的方法
  }
};



</script>

<style scoped>
.project-management-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-input {
  position: relative;
}

.search-input i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input input {
  padding: 8px 10px 8px 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 180px;
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 100px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: #fff;
}

.search-btn {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  color: #606266;
  font-size: 14px;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-picker input {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 130px;
}

.action-buttons {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.reset-btn,
.export-btn {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reset-btn {
  background-color: #f4f4f5;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.export-btn {
  background-color: #ecf5ff;
  color: #409eff;
  border: 1px solid #d9ecff;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.tag-blue {
  background-color: #ecf5ff;
  color: #409eff;
}

.tag-purple {
  background-color: #f5f0ff;
  color: #8e44ad;
}

.tag-yellow {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.tag-green {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-success {
  background-color: #67c23a;
}

.status-pending {
  background-color: #e6a23c;
}

.action-btn {
  background-color: #ecf5ff;
  color: #409eff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-number {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  background-color: #f4f4f5;
  color: #606266;
  text-decoration: none;
}

.page-number.active {
  background-color: #409eff;
  color: white;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
</style>